[ASP.NET] 誰才是鈕承澤，論Literal控制項特性(最下方補充範例)

第 11 屆 iThome 鐵人賽

DAY 24

Modern Web

ASP.NET Web Form 入門30天系列第 24 篇

11th鐵人賽 asp.net 伺服器控制項 label literal

碼屋( MARK WU )

團隊火箭隊

2019-09-25 23:47:04

8324 瀏覽

分享至

本篇擷取重點：

文字標示的伺服器控制項比較（Literal v.s Label）
Label及Literal伺服器控制項之實際應用
誰才是鈕承澤，論Literal控制項特性(最下方補充範例)

一、文字標示的伺服器控制項比較（Literal v.s Label）

Label、Literal 這兩個控制項都可以用來呈現文字，下方提供兩點讓大家作為選擇的依據：

1. 文字內容是否需要設定外觀格式：

如果希望可以為這段文字設定外觀樣式(如CSS、JS)，請用 Label
如果只是一段純文字，一定不需要設定字體大小等樣式，用 Literal 即可

2. 在網頁原始碼的呈現上的差異：
- 如果希望內容會被包在 < span> </ span> 中間，請用 Label
- 如果希望內容只會有指定文字( 即 Text 屬性)，請用 Literal

二、舉個例子說明：

設計頁面(index.aspx)：

<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" BackColor="red" runat="server" Text=""></asp:Label>
            <br />
            <asp:Literal ID="Literal1"  runat="server"></asp:Literal>
        </div>
    </form>
</body>

後置程式碼(index.aspx.cs)：

protected void Page_Load(object sender, EventArgs e)
{
    Label1.Text = "<b>HELLO WORLD By Label</b>";
    Literal1.Text = "<b>HELLO WORLD By Literal</b>";
}

網頁呈現：

網頁 -右鍵 -檢視原始碼

我們可以發現

Label控制項：會被包裹HTML標籤 < span> </ span>之中，且能設定外觀樣式(如CSS、JS)。

<span id="Label1" style="background-color:Red;"><b>HELLO WORLD By Label</b></span>

Literal控制項：則無，故適合用於程式碼的串接(於下方，貼心小補充說明中示範)

<b>HELLO WORLD By Literal</b>

參考資料：
http://www.webapp.com.tw/EBook5/view.aspx?a=1&TreeNodeID=140&id=1387
http://epaper.gotop.com.tw/pdf/AEL007600.pdf (大推薦)
http://epaper.gotop.com.tw/pdf/ACL025600.pdf
https://kknews.cc/code/yne8bab.html
http://rfid.ctu.edu.tw/rueychi/CCA/ASPNET/6_%E4%BC%BA%E6%9C%8D%E5%99%A8%E6%8E%A7%E5%88%B6%E9%A0%85.pdf

==================================================================
貼心小補充

三、誰才是鈕承澤，論Literal控制項特性(下方補充範例)

1. 如何使用 Literal控制項進行程式碼的串接：

設計頁面(index.aspx)：

<body>
    <form id="form1" runat="server">
        <div>
            <asp:Literal ID="Literal1"  runat="server"></asp:Literal>
        </div>
    </form>
</body>

後置程式碼(index.aspx.cs)：

protected void Page_Load(object sender, EventArgs e)
{
    Literal1.Text = @"<h3>下方分別為 屈中恆 / 鈕承澤 / 劉志威 / 宋少卿 四人的照片，您分的出誰是誰嗎</h3><img src=""https://img.ltn.com.tw/Upload/liveNews/BigPic/600_phpUxbq0F.jpg""><h2>請示著回答、用心回答，試問</h2><ul><li><h3>1.誰是宋少卿</h3></li><li><h3>2.誰是鈕承澤</h3></li><li><h3>3.誰是屈中恆</h3></li><li><h3>4.誰是劉志威</h3></li></ul>";
}

網頁呈現：